.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

#container {
  .width(1920);
  .height(1080);
  overflow: hidden;
  background: #001047;

  // 头部
  .header {
    .width(1920);
    .height(80);
    position: absolute;
    z-index: 1001;
    background-image: url("../../assets/images/datav/title_img2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #092560;
    // background-color: #063894;

    .tabs {
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 1%;
      .fontSize(16);
      display: flex;
      align-items: center;
      > div {
        cursor: pointer;
      }
    }

    .header_right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1%;
      // width: 5%;

      ::v-deep .el-image__inner {
        cursor: pointer;
      }
      .item {
        margin-left: 0.6vw;
        width: 1.25vw;
        .el-image__inner {
          width: 100%;
        }
      }
    }
  }

  // 左侧
  .left {
    .width(430);
    .height(970);
    .marginTop(100);
    .marginLeft(15);
    position: absolute;
    display: flex;
    flex-direction: column;
    // background-color: #0A183D;
    // opacity: 0.9;
    z-index: 1001;
    box-sizing: border-box;

    .left_div {
      width: 100%;
      height: 100%;
      // background-size: 100% 100%;
    }

    // background: #0A1437;
    // opacity: 0.85;
    .left_noe {
      .height(340);
      .marginBottom(12);
      // background-color: #0a183d;
      // opacity: 0.9;
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_two {
      .height(200);
      .marginBottom(12);
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_three {
      .height(270);
      .marginBottom(12);
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_four {
      .height(315);
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  // 单位
  .org_box {
    .width(430);
    .height(970);
    .marginTop(100);
    .marginLeft(15);
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    box-sizing: border-box;

    .left_div {
      width: 100%;
      height: 100%;
    }

    .left_noe {
      .height(250);
      .marginBottom(12);
      background: url("../../assets/images/datav/orgxiangqing.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_two {
      .height(180);
      .marginBottom(12);
      background: url("../../assets/images/datav/shebeitonji.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_three {
      .height(180);
      .marginBottom(12);
      background: url("../../assets/images/datav/shebeitonji.png") no-repeat;
      background-size: 100% 100%;
    }

    .left_four {
      .height(302);
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  // 中间
  .top_mid {
    .width(1040);
    .height(180);
    .marginTop(100);
    .marginLeft(455);
    position: absolute;
    display: flex;
    overflow: hidden;
    z-index: 1001;

    .top_mid_noe {
      flex: 1;
      background-color: rgba(13, 23, 58, 0.9);
      background: url("../../assets/images/datav/mid_img.png") no-repeat;
      background-size: 100% 100%;
    }

    .top_mid_two {
      .marginLeft(1);
      flex: 1;
      background-color: rgba(13, 23, 58, 0.9);
      background: url("../../assets/images/datav/mid_img2.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  // 右侧
  .right {
    .width(400);
    .height(970);
    .marginTop(100);
    .marginLeft(1510);
    position: absolute;
    // background-color: rgba(13, 23, 58, .9);
    z-index: 1001;

    .right_div {
      width: 100%;
      // height: 100%;
      .height(630);
      background: url("../../assets/images/datav/gaojing_img.png") no-repeat;
      background-size: 100% 100%;
      .marginBottom(12);
    }

    .right_alarm {
      width: 100%;
      .height(303);
      background: url("../../assets/images/datav/kapian.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  // 地图
  .midmap {
    .width(1920);
    .height(1030);
    .marginTop(50);
    // .marginLeft(455);
    position: absolute;
  }

  // 地图
  .midmap2 {
    // .width(1045);
    // .height(952);
    .width(1920);
    .height(1030);
    .marginTop(50);
    // .marginLeft(455);
    position: absolute;
    // z-index: 1001;
    // background: url("../../assets/images/datav/map_img.png") no-repeat;
    // background-size: 100% 100%;
    // border-radius: 30rpx;
  }

  .logo {
    width: auto;
    height: 42px;
    margin-left: 8px;
  }

  .tableBtnIcon{
      color: rgba(2, 220, 249, 0.8);
    font-size: 1.1vw;
    cursor: pointer;
  }
}
